<template>
  <div class="mod-config">
    <basic-container>
      <div class="boxsty zhiBiao">
        <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">二级领导年奖统计</div>
          <div class="tablelink">
            <!--            <el-link icon="el-icon-plus" v-if="permissions.jiangjin_jiangjinfpjjfpdjb_view" type="primary"-->
            <!--                     @click="addOrUpdateHandle()" :underline="false">新增人员信息-->
            <!--            </el-link>-->
            <!--            <el-button v-if="permissions.jiangjin_jiangjinfpjjfpdjb_view" icon="el-icon-plus" type="primary" @click="addOrUpdateHandle()">新增</el-button>-->
          </div>
        </div>

        <el-form :inline="true" :model="dataForm" @keyup.enter.native="queryData()" class="form-inline">
          <el-form-item label="姓名">
            <el-input v-model="dataForm.ryName" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="单位名称">
            <el-select ref='multiSelect' @clear="clpar" class="ld-select" clearable :value="valueTitle" filterable
                       placeholder="请选择" popper-class="ld-select_tree-drop" style="width: 280px">
              <el-option :value="valueTitle">
                <el-tree :data="treeData" :props="defaultProps" class="filter-tree" highlight-current accordion
                         @node-click="getNodeData"/>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="marginLeft" @click="queryData()" plain>检索</el-button>
            <el-button type="primary" class="marginLeft" @click="exTable()">导出</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="dataList" border v-loading="dataListLoading" class="avue-crud" height="450px">
          <el-table-column prop="" label="序号" :formatter="nShowIndex" header-align="center" align="center" width="70"></el-table-column>
          <el-table-column prop="ryName" header-align="center" align="center" label="姓名" width="100"></el-table-column>
          <el-table-column prop="deptName" header-align="center" align="center" label="单位名称" min-width="300"></el-table-column>
          <el-table-column prop="ryZhiwei" header-align="center" align="center" label="人员职务" width="120"></el-table-column>
          <el-table-column prop="ryZwjb" header-align="center" align="center" label="人员职级" width="100"></el-table-column>
          <el-table-column prop="jjJe" header-align="center" align="center" label="奖金总额" width="120"></el-table-column>
          <el-table-column prop="jjBz" header-align="center" align="center" label="备注" min-width="300"></el-table-column>
          <el-table-column header-align="center" align="center" label="操作" width="150">
            <template slot-scope="scope">
              <el-button v-if="permissions.jiangjin_jiangjinfpjjfpdjb_edit" type="primary" @click="addOrUpdateHandle(scope.row.id)">奖金明细</el-button>
              <!--<el-button v-if="permissions.jiangjin_jiangjinfpjjgrfppzmxb_del" type="text" size="small" icon="el-icon-delete" @click="deleteHandle(scope.row.id)">删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>

        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>

      <!-- 弹窗, 新增 / 修改 -->
      <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="queryData"></table-form>
      <!-- 分配明细 -->
      <de-fppzmxb v-if="deFppzmxbVisible" ref="deFppzmxb"></de-fppzmxb>
    </basic-container>
  </div>
</template>

<script>
import {fetchList, getGrfppzmxbPage} from '@/api/jiangjin/jiangjinfpjjgrfppzmxb'
import TableForm from './jiangjinfpjjgrfppzmxb-form'
import {mapGetters} from 'vuex'
import {fetchTree, getObj} from '@/api/admin/dept'
import request from '@/router/axios'
import DeFppzmxb from './fppzmxbDetail'


export default {
  data() {
    return {
      dataForm: {
        ryName: '',
        deptCode: '',
      },
      dataFormfb: {},
      valueTitle: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      treeData: [],
      //--

      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      deFppzmxbVisible: false
    }
  },
  components: {
    DeFppzmxb,
    TableForm
  },
  created() {
    this.queryData()

    fetchTree().then(res => {
      this.treeData = res.data.data
    })

  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    queryData() {
      this.pageIndex = 1;
      this.dataFormfb = JSON.parse(JSON.stringify(this.dataForm));
      this.getDataList();
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true

      getGrfppzmxbPage(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, this.dataFormfb)).then(response => {
        this.dataList = response.data.data.records
        this.totalPage = response.data.data.total
      })
      this.dataListLoading = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      //this.addOrUpdateVisible = true
      //this.$nextTick(() => {
      //this.$refs.addOrUpdate.init(id)
      //})

      this.deFppzmxbVisible = true;
      this.$nextTick(() => {
        this.$refs.deFppzmxb.init(id);
      })

    },
    // 删除
    deleteHandle(id) {
      this.$confirm('是否确认删除ID为' + id, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(id)
      }).then(data => {
        this.$message.closeAll()
        this.$message.success('删除成功')
        this.getDataList()
      })
    },
    //---- 搜索条件下拉
    clpar() {
      this.valueTitle = '';
      this.dataForm.deptCode = '';
    },

    //下拉选择单机事件
    getNodeData(data) {
      this.valueTitle = data.deptName;
      this.dataForm.deptCode = data.deptCode

      this.$refs.multiSelect.blur()

      //this.valueTitle = data.name;
      // getObj(data.id)
      //   .then(res => {
      //     var obj = res.data.data;
      //     ////console.log(obj);
      //     this.dataForm.jjDeptCode = obj.deptCode
      //     this.dataForm.jjDeptId = obj.deptId
      //     this.$refs.multiSelect.blur()
      //
      //   })
      //   .catch(err => {
      //    //console.log(err);
      //   })
    },
    nShowIndex(row, column, cellValue, index) {
      return index + 1 + this.pageSize * (this.pageIndex - 1);
    },
    //----
    exTable() {
      const filename = "二级领导年奖统计";
      return request({
        url: '/jiangjin/jiangjinfpjjgrfppzmxb/exGrfppzmxb',
        method: 'get',
        responseType: 'arraybuffer'
      }).then((response) => { // 处理返回的文件流
        const blob = new Blob([response.data], {
          type: 'application/vnd.ms-excel'
        })
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = filename
        document.body.appendChild(link)
        link.click()
        window.setTimeout(function () {
          URL.revokeObjectURL(blob)
          document.body.removeChild(link)
        }, 0)
      })
    }
  }
}
</script>
